<template>
	<div id="tmpl">
	<div class="silder">
	<!-- 轮播图 -->
		<silder :imgs="imgs"></silder>

		<!-- 商品购买 -->
		<div id="buy">
			<h4 v-text="info.title"></h4>
			<p class="line"></p>
			<ul>
				<li class="price">
					市场价: <s>￥{{info.market_price}}</s>    销售价：<span>￥{{info.sell_price}}</span>
				</li>
				<li class="inputli">
					购买数量：<inputNumber v-on:dataobj='getcount' class="inputnumber"></inputNumber>
				</li>
				<li>
					<mt-button type="primary" size="small">立即购买</mt-button>
					<mt-button type="danger" size="small">加入购物车</mt-button>
				</li>
			</ul>
		</div>

		<div id="params">
				<h6>商品参数</h6>
				<p class="line"></p>
			<ul>
				<li>商品货号：{{info.goods_no}}</li>
				<li>库存情况：{{info.stock_quantity}}</li>
				<li>上架时间：{{info.add_time | datefmt('YYYY-MM-DD')}}</li>
			</ul>
		</div>

		<!--3.0 图文详情-->
		<!--4.0 商品评论-->
		<div id="other">
		<router-link v-bind="{to:'/goods/goodsdesc/'+id}">
			<mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button>
			</router-link>
			<router-link v-bind="{to:'/goods/goodscomment/'+id}">
			<mt-button type="danger" size="large">商品评论</mt-button>
			</router-link>
		</div>
		</div>
	</div>
</template>
<script>
import { Toast } from 'mint-ui';
import common from "../../kits/common.js";
import silder from "../subcom/silder.vue";
import inputNumber from "../subcom/inputNumber.vue";
	export default{
		components:{
			silder,
			inputNumber
		},
		data(){
			return{
				inputNumberCount:1,
				id:0,
				imgs:[],
				info:{
				}
			}
		},
		created(){
		this.id=this.$route.params.id;
		this.gitimgs();
		this.getinfo();
		},
		methods:{
			getinfo(){
				var url=common.apidomain+'/api/goods/getinfo/'+this.id;
				this.$http.get(url).then(function(res){
					this.info=res.body.message[0];
				})
			},
			gitimgs(){
				var url=common.apidomain+'/api/getthumimages/'+this.id;
			this.$http.get(url).then(function(res){
				this.imgs=res.body.message;
			})
			},
			getcount(count){
				this.inputNumberCount=count;
			}
		}

		}
</script>
<style scoped>
	.silder{
	 border:1px solid rgba(0,0,0,0.4);
	 border-radius: 5px;
	 margin: 5px;
 }

	#buy,#params,#other
	{
		margin: 5px;
		padding: 5px;
		border:1px solid rgba(0,0,0,0.4);
		border-radius: 5px;
	}
 .line{
		height: 1px;
		border: 1px solid rgba(0,0,0,0.2);
	}
	#buy ul,#params ul{
		padding-left: 0px;
	}
 #buy h4{
	 color:#0094ff;
	padding: 5px;
 }
 #buy li,#params li{
	 list-style: none;
	 padding: 8px;
 }

	#buy .price span{
		color:red;
	}

	#other .imgdesc{
		margin-bottom: 20px;
	}
	.inputli{
		position: relative;
	}
	.inputnumber{
		position: absolute;
		left: 100px;
		top: -40px;
	}
</style>